<!--<template>-->
<!--  <view class="container">-->
<!--    &lt;!&ndash; 列表 &ndash;&gt;-->
<!--    <view class="list-box">-->
<!--      <view v-for="(item, index) in list" :key="index" class="list-item">-->
<!--        <view class="img-box">-->
<!--          <image src="/static/bianji.png" mode="aspectFit" class="img" @click="handleText(item)"></image>-->
<!--        </view>-->
<!--        <view class="name">{{ item.friendName }}</view>-->
<!--        <view class="phone">{{ item.friendPhone }}</view>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="button-group">-->
<!--      <button type="primary" @click="handleAddPassenger">添加乘客</button>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<template>
  <view class="container">
    <!-- 列表 -->
    <view class="list-box">
      <view v-for="(item, index) in list" :key="index" class="list-item">
        <view class="img-box">
          <image src="/static/bianji.png" mode="aspectFit" class="img" @click="handleText(item)"></image>
        </view>
        <view class="name">{{ item.friendName }}</view>
        <view class="phone">{{ item.friendPhone }}</view>
      </view>
    </view>
    <view class="button-group fixed-button">
      <button class="btn" type="primary" @click="handleAddPassenger">添加乘客</button>
    </view>
  </view>
</template>

<script>
import {getFriendList} from "@/api/durian/friend/friend.js";

export default {

  data() {
    return {
      // 列表数据
      list: []
    };
  },
  onLoad() {
    this.getFriendList();
  },
  onShow() {
    this.getFriendList();
  },
  methods: {
    getFriendList() {
      getFriendList().then(res => {
        this.list = res.rows;
      });
    },
    handleText(item) {
      // console.log(item.friendName);
      this.$tab.navigateTo(`/pages/mine/friend/sou/index?id=${item.id}`);
    },
    handleAddPassenger() {
      // 跳转页面
      this.$tab.navigateTo(`/pages/mine/friend/sou/add`);
    },
  }
};
</script>

<style scoped>


.container {
  position: relative;
  min-height: 100vh; /* 确保容器至少与视口高度相同 */
}

.fixed-button {
  position: fixed;
  bottom: 0;
  width: 100%; /* 或者根据需要设置宽度 */
  color: #1cbbb4;
}

.btn {
  border-radius: 100px; /* 设置为圆形 */
  padding: 10px 20px; /* 调整填充以适应文本 */
  width: auto; /* 根据文本自动调整宽度 */
  background-color: #1cbbb4;
}

.list-item {
  /* 增加列表项之间的间距 */
  background: #fff;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.name {
  /* 添加底部边距，使手机号位于姓名下方 */
  margin-bottom: 10px;
  font-size: 17px;
}

.phone {
  font-size: 18px;
  color: #b2b2b2;
}

.img {
  width: 40rpx;
  height: 40rpx;
}

.img-box {
  display: flex;
  width: 30px;
  float: right;
}
</style>
